<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>

  <div>
    <button id="sendRequest">发送串行请求</button>
  </div>
  <script>
    function request(url, method, data={}) {
      const BASE_URL = 'http://localhost:4001/api/v1/test'
      let config = {
        url: BASE_URL + url,
        method: method,//'get',
        headers: {
          'Content-Type': 'application/json'
        },
      }
      method.toLowerCase === 'get' ? config.params = data : config.data = data;
      return axios.request({
        ...config
      }).then(res=>res.data)
    }

    // utils : 优雅的处理异步请求
    function errorCaptured(asyncFn){
      return async function(...args){
         //asyncFn : 异步请求函数
        try {
          // async await : 被try cartch 捕获到
          const res = await asyncFn(...args)
          return [null, res]
        } catch (error) {
          return [error, null]
        }
      }
    }

    sendRequest.onclick = async function(){
      const [error1,result1] = await errorCaptured(request)('/test1/1', 'get');
      const [error2,result2] = error1? '' : await errorCaptured(request)(`/test2/${result1.data.id2}/`, 'get');
      const [error3,result3] = error2? '' : await errorCaptured(request)(`/test3/${result2.data.id3}/`, 'get');
      result3 && console.log(result3.data.msg)
    }
  </script>
</body>
</html>